<template>
  <div v-if="show" class="secure-source flex flex-s">
    <div ref="target" class="inner flex gc-4 slide-in">
      <div class="about-me">
        <ul class="flex flex-col gr-8">
          <li v-for="(item, key) in relatedPersonnel" :key="key" class="p-4">
            <div class="title text-14 text-bold">
              {{ item }}
            </div>
            <div class="flex gc-4 align-center">
              <div>
                <img :src="avatar" alt="" width="32" />
              </div>
              <div class="text-666">吴文龙</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="source flex-1">
        <div class="text-16 text-bold flex justify-between align-center">
          <div> 项目说明 </div>
          <div>
            <img
              class="cursor-pointer"
              :src="close"
              alt=""
              width="24"
              @click="show = false"
            />
          </div>
        </div>
        <div
          style="height: 80px; background: #f8f8f8"
          class="mt-8 flex flex-s p-12 text-666"
        >
          技术
          VUE3+TS+VITE+少量库,无UI框架,超轻量体积,纯静态页面,无后端。请勿将配置文件泄漏出去
        </div>
        <div class="my-8 text-666">相关链接</div>
        <ul class="flex gr-4 flex-col">
          <li
            v-for="(item, key) in links"
            :key="key"
            class="flex justify-between link"
          >
            <div class="flex gc-4 align-center">
              <img
                :src="`https://api.qqsuu.cn/api/dm-get?url=${item.official}`"
                width="24"
                class="border-4"
                height="24"
              />
              <div>{{ item.title }}</div>
            </div>
            <div>
              <a
                v-if="item.link"
                :href="item.link"
                style="text-transform: uppercase"
                target="_blank"
              >
                前往
              </a>
              <div v-else class="text-666">未开放</div>
            </div>
          </li>
        </ul>

        <div class="my-8 text-666">反馈</div>
        <div class="feedback-desc flex flex-s">
          <div> 通道正在 <span class="gradient-text">建设中</span> </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import avatar from '@/assets/images/avatar.jpg';
  import close from '@/assets/images/close.png';
  import { ref } from 'vue';
  import { onClickOutside } from '@vueuse/core';
  import { show, relatedPersonnel, links } from './bus';

  const target = ref();
  onClickOutside(target, () => {
    show.value = false;
  });
</script>

<style lang="scss" scoped>
  @import './style';
</style>
